<template>
	<span class="label ellipsis" :style="{'padding-right':disableClose?'':'16px'}">
		<slot></slot><span v-if="!disableClose" @click.stop="close" class="el-icon-close"></span>
	</span>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'memberLabel'
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) private item: any; // 标签
  @Prop({ default: false }) private disableClose: any; // 是否禁用关闭
  private close () {
    this.$emit('close');
  }
}
</script>
<style lang="stylus" scoped>
.label {
	line-height 24px
	font-size 12px
	padding 0px 8px 0px 2px
	border-radius 12px
	display inline-block
	opacity 0.6
	max-width 100px
	min-width 50px
	vertical-align middle
	position relative
	&+label {
		marign-left 8px
	}
	.el-icon-close {
		position absolute
		top 50%
		transform translateY(-50%)
		right 3px
		font-size 12px
		color #000
		opacity 0.3
	}
}
</style>
